<template>
  <el-dialog
    :visible="visible"
    @update:visible="close"
    class="ggdialog"
    :fullscreen="isFullscreen"
    v-bind="$attrs"
  >
    <!-- 接受父组件传递过来的 title props 数据，以具名插槽形式传递给子组件 -->
    <template #title>
      <div class="ggdialog-header">
        <span class="ggdialog-title">{{ title }}</span>
        <SvgIcon
          :iconClass="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
          className="ggdialog-icon"
          @click="switchFullscreen"
        />
      </div>
    </template>

    <!-- 接受父组件传递的默认插槽，继续以默认插槽形式传递给子组件 -->
    <slot />

    <!-- 接受父组件传递的 footer 具名插槽，继续以 footer 具名插槽形式传递给子组件 -->
    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script>
import SvgIcon from "@/components/SvgIcon";

export default {
  name: "GGDialog",
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      isFullscreen: false,
    };
  },
  methods: {
    switchFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },
    close() {
      this.$emit("update:visible", false);
    },
  },
  components: {
    SvgIcon,
  },
};
</script>

<style scoped lang="scss">
.ggdialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 30px;
}

.ggdialog-title {
  font-size: 16px;
}

.ggdialog-icon {
  color: #909399;
  cursor: pointer;
}

.ggdialog :deep .el-dialog__header {
  position: relative;
  padding: 15px 20px;
  border-bottom: 1px solid #dcdfe6;
}

.ggdialog :deep .el-dialog__headerbtn {
  top: 50%;
  transform: translateY(-50%);

  .el-dialog__close {
    font-size: 20px;
  }

  &:hover .el-dialog__close {
    color: #909399 !important;
  }
  &:focus .el-dialog__close {
    color: #909399 !important;
  }
}

.ggdialog :deep .el-dialog__footer {
  padding: 10px 20px;
  border-top: 1px solid #dcdfe6;
}

.ggdialog :deep .el-dialog {
  max-height: none;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.ggdialog :deep .el-dialog__body {
  flex: 1;
}
</style>
